<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表单数据</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 表单提交事件,禁止跳转 -->
        <form @submit.prevent="demo">
            <!-- .trim去掉前后的空格 -->
            账户:<input type="text" v-model.trim="userInfo.account"/></br></br>
            密码:<input type="password" v-model="userInfo.password"/></br></br>
                <!-- 限制输入为数字，type类型指定为number -->
            年龄:<input type="number" v-model.number="userInfo.age"/></br></br>
            性别:男<input type="radio"  name="sex" value="male" v-model="userInfo.sex"/> 女<input type="radio" name="userInfo.sex"  value="female" v-model="userInfo.sex"/></br></br>
            爱好:抽烟: <input type="checkbox" v-model="userInfo.hobby" value="study" /> 喝酒 <input type="checkbox" checked="checked" v-model="userInfo.hobby" value="drink"/> 烫头 <input type="checkbox" v-model="userInfo.hobby" value="burn"/></br></br>
            所属校区:   <select v-model="userInfo.city">
                        <option value="请选择校区">请选择校区</option>
                        <option value="蒙阳校区">蒙阳校区</option>
                        <option value="竹瓦校区">竹瓦校区</option>
                        </select></br></br>
            其他信息：
            <!-- .lazy，失去焦点后实时收集  -->
            <textarea rows="10" cols="30"  v-model.lazy="userInfo.other">
                
            </textarea></br></br>
            <input type="checkbox" checked="checked" v-model="userInfo.agree"/>  阅读并接受 <a href="http://">《用户协议》</a></br></br>
            <button>接受</button>
        </form>
    </div>
</body>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
          el:'#root',
          data:{
               userInfo:{
                account:'',
                password:'',
                sex:'male',
                hobby:[],
                age:'',
                city:'',
                other:'',
                agree:''
}
          },
          methods: {
              demo(){
                // console.log(
                //     "账号:"+this.account,
                //     "密码:"+this.password,
                //     "性别:"+this.sex,
                //     "爱好:"+this.hobby,
                //     "城市:"+this.city,
                //     "其他:"+this.other,
                //     "是否同意:"+this.agree)
                //转换为json,但是不建议直接访问，建议存放在一个对象里，如userInfo
                console.log(JSON.stringify(this.userInfo))
              }
          },
        })
    </script>
</html>